<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>车辆管理</title>

<script type="text/javascript">

var $grid;
var $CarUseGrid;
var selectedCar;
$(function(){
	$grid = $("#grid").datagrid({
		url:"${ctx}/basic/carManages/dataGrid",
		title:"车辆管理",
		method:"get",
		idField:"id",
		remoteSort: true,
		multiSort : true,
		singleSelect : true,
		rownumbers : true,
		fit : true,
		toolbar : '#tt',
		pagination : true,
		pageList : [ 10, 20, 30, 40, 50, 100 ],
		columns : [ [ {
			field : 'ck',
			checkbox : true
		}, {
			field : 'carNo',
			title : '车辆编号',
			sortable : true
		}, {
			field : 'companyName',
			title : '所属公司名称',
			sortable : true
		}, {
			field : 'carModel',
			title : '厂牌型号',
			sortable : true
		}, {
			field : 'engineModel',
			title : '发动机型号',
			sortable : true
		}, {
			field : 'compulsoryInsurance',
			title : '强制险',
			sortable : true
		}, {
			field : 'fullyInsured',
			title : '全险',
			sortable : true
		}, {
			field : 'contractPeriod',
			title : '合同期',
			sortable : true
		}, {
			field : 'safetyStartDate',
			title : '保险开始日期',
			sortable : true
		}, {
			field : 'safetyEndDate',
			title : '保险结束日期',
			sortable : true
		}, {
			field : 'examinedTime',
			title : '年审时间',
			sortable : true
		},{
			field : 'remark',
			title : '备注',
			sortable : true
		}, {
			field : 'enable',
			title : '是否启用',
			formatter : function(value, row, index) {
				return value == 1 ? "是" : "否";
			}
		} ] ],
		enableHeaderClickMenu : true, //此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
		enableHeaderContextMenu : true, //此属性开启表头列名称右键点击菜单
		enableRowContextMenu : false,
		onClickRow : function(rowIndex, rowData){
			selectedCar = rowData;
			refreshCarUse();//刷新当前车辆使用管理
		}
			
	});
	
    $CarUseGrid = $("#carUseGrid").datagrid({
    	//title:"车辆使用管理",
		method:"get",
		idField:"id",
		remoteSort:"true",
		multiSort : true,
		rownumbers : true,
		singleSelect : true,
		fit : true,
		toolbar : '#carusett',
		pagination : true,
		pageList : [ 10, 20, 30, 40, 50, 100 ],
		columns : [ [ {
			field : 'ck',
			checkbox : true
		}, {
			field : 'userName',
			title : '使用者',
			sortable : true
		}, {
			field : 'startPlace',
			title : '起始地址',
			sortable : true
		}, {
			field : 'endPlace',
			title : '结束地址',
			sortable : true
		}, {
			field : 'oilMoney',
			title : '加油费用',
			sortable : true
		}, {
			field : 'cleanMoney',
			title : '洗车费用',
			sortable : true
		}, {
			field : 'startTime',
			title : '开始时间',
			sortable : true
		}, {
			field : 'endTime',
			title : '结束时间',
			sortable : true
		},{
			field : 'remark',
			title : '备注',
			sortable : true
		} ] ],
		enableHeaderClickMenu : true, //此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
		enableHeaderContextMenu : true, //此属性开启表头列名称右键点击菜单
		enableRowContextMenu : false
	});

	//增加按钮
	$("#add").click(function() {
		$("#fm").form("clear");
		$('#fm').form('load', {
			enable : 1
		});

		$("#dlg").dialog("open").dialog("setTitle", "新增车辆信息");
		
	});
	
	//编辑按钮
	$("#edit").click(function() {
		var rowData = $grid.datagrid("getSelected");
		if (rowData == null) {
			$.messager.show({
				msg : "您未选中行，无法编辑",
				icon : "warning",
				position : "bottomRight"
			});
		} else {
			$("#dlg").dialog("open").dialog("setTitle", "编辑车辆信息");
			$("#fm").form("load", rowData);
		}
	});
	
	//删除按钮
	$("#delete").click(function() {
		var rowData = $grid.datagrid("getSelected");
		if (rowData == null) {
			$.messager.show({
				msg : "您未选中行，无法删除",
				icon : "warning",
				position : "bottomRight"
			});
		} else {
			$.messager.confirm("您确定要进行该操作？", function(c) {
				if (c) {
					$.get("${ctx}/basic/carManages/delete/" + rowData.id, function(result) {
						$.messager.show({
							msg : result.msg,
							icon : "info",
							position : "bottomRight"
						});
						if (result.success) {
							$grid.datagrid("load");
						}
					}, 'json');
				}
			});
		}
	});
	
	//查询
	$("#search").click(function() {
		$grid.datagrid('load', $("#tt").form("getData"));
	});
	
	
	//车辆使用管理

	//增加按钮
	$("#useRecordAdd").click(function() {
		if (!selectedCar) {
			showAlert("请先选择车辆信息");
			return false;
		}

		$("#curdlg").dialog("open").dialog("setTitle", "新增车辆使用信息");
		$("#curfm").form("clear").form("load", {
			carId : selectedCar.id
		});
	});

	//编辑按钮
	$("#useRecordEdit").click(function() {
		var rowData = $CarUseGrid.datagrid("getSelected");
		if (rowData == null) {
			$.messager.show({
				msg : "您未选中行，无法编辑",
				icon : "warning",
				position : "bottomRight"
			});
		} else {
			$("#curdlg").dialog("open").dialog("setTitle", "编辑车辆使用信息");
			$("#curfm").form("load", rowData);
		}
	});

	//删除按钮
	$("#useRecordDelete").click(function() {
		var rowData = $CarUseGrid.datagrid("getSelected");
		if (rowData == null) {
			$.messager.show({
				msg : "您未选中行，无法删除",
				icon : "warning",
				position : "bottomRight"
			});
		} else {
			$.messager.confirm("您确定要进行该操作？", function(c) {
				if (c) {
					$.get("${ctx}/basic/carUseRecord/delete/" + rowData.id, function(result) {
						$.messager.show({
							msg : result.msg,
							icon : "info",
							position : "bottomRight"
						});
						if (result.success) {
							$CarUseGrid.datagrid("load");
						}
					}, 'json');
				}
			});
		}
	});

	//查询
	$("#useRecordSearch").click(function() {
		$CarUseGrid.datagrid('load', $("#carusett").form("getData"));
	});
	
	//车辆使用者列表
	$('#userList').combogrid({    
	    panelWidth:450,    
	    value:'请选择使用者',    
	    idField:'id',    
	    textField:'trueName',    
	    url:'${ctx}/basic/user/dataGrid',    
	    columns:[[    
	        {field:'id',title:'ID',width:60},    
	        {field:'trueName',title:'姓名',width:100},    
	        {field:'duty',title:'职务',width:120},    
	        {field:'userType',title:'职务类型',width:100}    
	    ]]    
	}); 

	
	
});		

//刷新车辆使用管理
function refreshCarUse() {
	if (!selectedCar) {
		showAlert("请先选择车辆信息");
		return false;
	}
	$CarUseGrid.datagrid({
		url : "${ctx}/basic/carUseRecord/dataGrid?search_EQ_carId="
				+ selectedCar.id
	});
}

//车辆信息保存
function fn_save() {
	$("#fm").form("submit", {
		url : "${ctx}/basic/carManages/update",
		success : function(data) {
			$grid.datagrid("load");
			$.messager.show({
				msg : data.msg,
				icon : "info",
				position : "bottomRight"
			});
			$("#dlg").dialog('close');
		}
	});
}


//车辆使用记录保存
function fn_cur_save() {
	$("#curfm").form("submit", {
		url : "${ctx}/basic/carUseRecord/update",
		success : function(data) {
			$CarUseGrid.datagrid("load");
			$.messager.show({
				msg : data.msg,
				icon : "info",
				position : "bottomRight"
			});
			$("#curdlg").dialog('close');
		}
	});
}


</script>

</head>
<body>
  <!-- 车辆信息管理 -->
	<div data-options="region:'center'" data-options="fit:true" style="padding: 1px;">
		<div id="cc" class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'" style="padding: 1px; witdh: 500px">


				<table id="grid">
				</table>

				<div id="tt" class="easyui-toolbar">
					<span>车辆编号：</span> <input type="text" name="search_LIKE_carNo"
						style="margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 3px;" />
					<a id="search" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-zoom'">查询</a>
					<div class="dialog-tool-separator"></div>
					<a id="add" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-standard-add'">新增</a> <a
						id="edit" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a>
					<a id="delete" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
					<div class="dialog-tool-separator"></div>
					<!--  
		<a id="excelImport" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-page-white-excel'">Excel导入</a>
		<a id="excelExport" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-page-excel'">Excel导出</a>
		-->
				</div>
			</div>
			<!-- 车辆使用记录管理 -->
			<div id="carUsePanel" data-options="region:'east', title:'车辆使用管理', split:true, collapsible:true" style="padding: 1px; width: 500px">

				<table id="carUseGrid">
				</table>

				<div id="carusett" class="easyui-toolbar">
					<span>使用人：</span> <input type="text" name="search_LIKE_userName"
						style="margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 3px;" />
					<a id="useRecordSearch" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-zoom'">查询</a>
					<div class="dialog-tool-separator"></div>
					<a id="useRecordAdd" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-standard-add'">新增</a> <a
						id="useRecordEdit" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a>
					<a id="useRecordDelete" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
					<div class="dialog-tool-separator"></div>
					<!--  
			<a id="excelImport" class="easyui-linkbutton"
				data-options="plain: true, iconCls: 'icon-standard-page-white-excel'">Excel导入</a>
			<a id="excelExport" class="easyui-linkbutton"
				data-options="plain: true, iconCls: 'icon-standard-page-excel'">Excel导出</a>
			-->
				</div>
			</div>

			<!-- 车辆管理表单 -->
			<div id="dlg" class="easyui-dialog"
				style="width: 600px; height: 300px; padding: 10px 20px"
				data-options="iconCls:'icon-save',resizable:true,modal:true, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
				<form id="fm" method="post">
					<input type="hidden" name="id" />
					<table id="tbl">
						<tr>
							<td><label>车辆编号:</label></td>
							<td><input name="carNo" class="easyui-validatebox"
								data-options="required: true"></td>
							<td><label>所属公司名称:</label></td>
							<td><input name="companyName" class="easyui-validatebox"
								data-options="required: true"></td>
						</tr>
						<tr>
							<td><label>车牌类型:</label></td>
							<td><input name="carModel" class="easyui-validatebox"
								data-options="required: true"></td>
							<td><label>发动机型号:</label></td>
							<td><input name="engineModel" class="easyui-validatebox"
								data-options="required: true"></td>
						</tr>
						<tr>
							<td><label>车架号:</label></td>
							<td><input name="chassisModel" class="easyui-validatebox"
								data-options="required: true"></td>
							<td><label>强制险:</label></td>
							<td><input name="compulsoryInsurance"
								class="easyui-numberbox" data-options="required: true"></td>
						</tr>
						<tr>
							<td><label>全险:</label></td>
							<td><input name="fullyInsured" class="easyui-numberbox"></td>
							<td><label>合同期:</label></td>
							<td><input name="contractPeriod" class="easyui-validatebox"></td>
						</tr>
						<tr>

							<td><label>保险开始日期:</label></td>
							<td><input name="safetyStartDate" class="easyui-datebox"></td>
							<td><label>保险结束日期:</label></td>
							<td><input name="safetyEndDate" class="easyui-datebox"></td>
						</tr>
						<tr>
							<td><label>年审时间:</label></td>
							<td><input name="examinedTime" class="easyui-datebox"></td>
							<td><label>是否启用:</label></td>
							<td><input id="radio1" name="enable" type="radio" value="1" /><label
								for="radio1">是</label> <input id="radio2" name="enable"
								type="radio" value="2" /><label for="radio2">否</label></td>
						</tr>
						<tr>
							<td><label>备注:</label></td>
							<td><textarea name="remark" cols="20" rows="2"></textarea></td>
						</tr>
					</table>

				</form>
			</div>

			<!-- 车辆使用管理表单 -->
			<div id="curdlg" class="easyui-dialog"
				style="width: 600px; height: 300px; padding: 10px 20px"
				data-options="iconCls:'icon-save',resizable:true,modal:true, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_cur_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
				<form id="curfm" method="post">
					<input type="hidden" name="id" />
					<table id="tbl">
						<tr>
							<td><label>车辆ID:</label></td>
							<td><input name="carId" readonly="true"
								class="easyui-validatebox" data-options="required: true"></td>
							<td><label>使用者:</label></td>
							<td><input name="userName" id="userList"
								data-options="required: true"></td>
						</tr>
						<tr>
							<td><label>起始地址:</label></td>
							<td><input name="startPlace" class="easyui-validatebox"
								data-options="required: true"></td>
							<td><label>结束地址:</label></td>
							<td><input name="endPlace" class="easyui-validatebox"
								data-options="required: true"></td>
						</tr>
						<tr>
							<td><label>加油费用:</label></td>
							<td><input name="oilMoney" class="easyui-numberbox"
								data-options="required: true"></td>
							<td><label>洗车费用:</label></td>
							<td><input name="cleanMoney" class="easyui-numberbox"
								data-options="required: true"></td>
						</tr>
						<tr>
							<td><label>开始时间:</label></td>
							<td><input name="startTime" class="easyui-datebox"></td>
							<td><label>结束时间:</label></td>
							<td><input name="endTime" class="easyui-datebox"></td>
						</tr>
						<tr>
							<td><label>备注:</label></td>
							<td><textarea name="remark" cols="20" rows="2"></textarea></td>
						</tr>
					</table>

				</form>
			</div>
		</div>
	</div>
</body>
</html>